<style>
  .model-form .layui-form-label {
    width: 100px;
  }

  .model-form .layui-input-block {
    margin-left: 130px;
  }

  .border0 {
    border: 0;
  }

  .sureBtn {
    width: 60px;
    float: left;
    margin-left: 20px;
    background: #00833D;
    height: 36px;
    color: white;
    line-height: 36px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
  }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">载具编号：</label>
                  <div class="layui-input-inline mr0">
                    <input name="code" class="layui-input" type="text"
                           placeholder="请输入载具编号"/>
                  </div>
                </div>
                <div class="layui-inline">
                  <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                          lay-submit>查询
                  </button>
                  <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                  </button>
                </div>
              </div>
              <div class="query-rt"></div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button id="palletBoxListBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
            </div>
            <div class="lay-btn-rt">
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table class="layui-table" id="palletBoxListTable" lay-filter="palletBoxListTable"></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="palletBoxListTableBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
  <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
  <a class="layui-btn layui-btn-xs" lay-event="printBarcode">打印条码</a>
</script>

<!-- 表单弹窗 添加 -->
<script type="text/html" id="palletBoxListForm">
  <form lay-filter="palletBoxListForm" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
      <label class="layui-form-label"><span style="color: red">*</span>载具类型</label>
      <div class="layui-input-block">
        <select id="vehicleTypeId" name="vehicleTypeId" lay-filter="vehicleTypeId" lay-verify="required" required lay-search></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label"><span style="color: red">*</span>规格尺寸</label>
      <div class="layui-input-block">
        <select id="vehicleStandardSizesId" name="vehicleStandardSizesId" lay-verify="required" required lay-search></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label"><span style="color: red">*</span>计量单位</label>
      <div class="layui-input-block">
        <input id="unit" type="text" readonly class="layui-input"/>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label"><span style="color: red">*</span>托盘编码前缀</label>
      <div class="layui-input-block">
        <input name="prefix" placeholder="请输入托盘编码前缀" type="text" maxlength="20" class="layui-input"
               lay-verify="required|isOnly" required/>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label"><span style="color: red">*</span>新增托盘数量</label>
      <div class="layui-input-block">
        <input name="quantity" placeholder="请输入新增托盘数量" type="text" maxlength="3" class="layui-input"
               lay-verify="required|integer" required/>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">托盘照片</label>
      <div id="trayPhotoUpload" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传图片
      </div>
      <div id="trayPhotoUpload_path" style="margin-left: 260px;line-height: 40px;"></div>
      <input id="trayPhoto" name="trayPhoto" type="hidden"/>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <textarea name="remark" placeholder="请输入备注" maxlength="200" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
      <button class="layui-btn" lay-filter="palletBoxListFormSubmit" lay-submit>保存</button>
    </div>
  </form>
</script>

<!-- 表单弹窗 编辑 -->
<script type="text/html" id="palletBoxListEdit">
  <form lay-filter="palletBoxListForm" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>编码</label>
        <div class="layui-input-block">
          <input name="code" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>载具类型</label>
        <div class="layui-input-block">
          <input name="vehicleTypeName" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>规格尺寸</label>
        <div class="layui-input-block">
          <input name="vehicleStandardSizes" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>计量单位</label>
        <div class="layui-input-block">
          <input name="unitName" type="text" readonly class="layui-input border0"/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">托盘照片</label>
        <div id="trayPhotoUpload_path" style="line-height: 38px;"></div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">所在货位号</label>
        <div class="layui-input-block">
          <input name="spaceCode" placeholder="请输入所在货位号" type="text" maxlength="200"
                 class="layui-input" style="width: 65%; float: left;"/>
          <div class="sureBtn" id="sure">确定</div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">所在仓库</label>
        <div class="layui-input-block">
          <input name="warehouseName" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">所在库区</label>
        <div class="layui-input-block">
          <input name="areaName" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">所在货架</label>
        <div class="layui-input-block">
          <input name="shelfName" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
          <input name="createTime" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">最后变动时间</label>
        <div class="layui-input-block">
          <input name="updateTime" type="text" class="layui-input border0" readonly/>
        </div>
      </div>
    </div>
    <div class="layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <textarea name="remark" type="text" maxlength="200" class="layui-textarea"></textarea>
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
      <button class="layui-btn" lay-filter="palletBoxListFormSubmit" lay-submit>保存</button>
    </div>
  </form>
</script>

<!-- js部分 -->
<script>
  var $, layer;

  function previewImg(index) {
    var img = new Image();
    img.src = $(index).attr("src");
    var height = img.height; //获取图片高度
    var width = img.width; //获取图片宽度
    if (width > 1000) {
      height = 1000 / width * height;
      width = 1000;
      if (height > 800) {
        width = 800 / height * width;
        height = 800;
      }
    }
    if (height > 800) {
      width = 800 / height * width;
      height = 800;
    }

    var imgHtml = "<img src='" + $(index).attr("src") + "' style='width: " + width + "px; height: " + height + "px;' />";
    //弹出层
    layer.open({
      type: 1,
      shade: 0.8,
      offset: 'auto',
      area: [width + 'px', (height + 50) + 'px'],
      shadeClose: true,//点击外围关闭弹窗
      scrollbar: false,//不现实滚动条
      title: "图片预览", //不显示标题
      content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
      cancel: function () {
        //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
      }
    });
  }

  layui.use(['layer', 'form', 'table', 'admin', 'upload'], function () {
    $ = layui.jquery;
    layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;

    // 渲染表格
    var insTb = table.render({
      elem: '#palletBoxListTable',
      url: config.base + 'warehouse/warehouse/admin/warehousePalletBoxList/list',
      page: true,
      cellMinWidth: 100,
      cols: [[
        {type: 'numbers'}
        , {field: 'code', align: 'center', title: '载具编号'}
        , {field: 'vehicleTypeName', align: 'center', title: '载具类型'}
        , {field: 'vehicleStandardSizes', align: 'center', title: '规格尺寸'}
        , {field: 'warehouseName', align: 'center', title: '所在仓库'}
        , {field: 'areaName', align: 'center', title: '所在库区'}
        , {field: 'shelfName', align: 'center', title: '所在货架'}
        , {field: 'spaceCode', align: 'center', title: '货位编号'}
        , {field: 'createTime', align: 'center', title: '创建时间'}
        , {align: 'center', toolbar: '#palletBoxListTableBar', title: '操作', width: 200}
      ]]
    });

    // 工具条点击事件
    table.on('tool(palletBoxListTable)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') { //修改
        showEditModel(data);
      } else if (obj.event === 'del') { // 删除
        doDelete(obj);
      } else if (obj.event === 'printBarcode') { // 打印
        admin.getPrintBarcode('warehouse/warehouse/admin/warehousePalletBoxList/getBarCode', data.code);
      }
    });

    //监听排序
    table.on('sort(palletBoxListTable)', function (obj) {
      table.reload('palletBoxListTable', {
        initSort: obj,
        where: {
          sort: obj.field,
          order: obj.type
        }
      });
    });

    // 搜索
    form.on('submit(formSubSearchLog)', function (data) {
      insTb.reload({where: data.field, page: {curr: 1}}, 'data');
    });

    // 重置搜索
    form.on('submit(resets)', function (data) {
      $(".lay-header").find('select').val("");
      $(".lay-header").find('input').val("");
      let field = data.field;
      for (let key in field) {
        field[key] = ''
      }
      insTb.reload({where: field, page: {curr: 1}}, 'data');
    });

    // 添加按钮点击事件
    $('#palletBoxListBtnAdd').click(function () {
      showEditModel();
    });

    // 显示编辑弹窗
    function showEditModel(data) {
      admin.open({
        type: 1,
        area: data ? '780px' : '480px',
        offset: '150px',
        title: data ? '修改托盘料箱清单' : '添加托盘料箱清单',
        content: data ? $('#palletBoxListEdit').html() : $('#palletBoxListForm').html(),
        success: function () {
          form.val('palletBoxListForm', data);

          //自定义验证规则
          form.verify({
            integer: [/^[0-9]\d*$/, '格式错误'],
            isOnly: function (value) {
              var isOnly = true;
              var idVal = $("form input[name='id']").val();
              admin.req('warehouse/warehouse/admin/warehousePalletBoxList/isOnly', {
                code: value,
                id: idVal
              }, function (res) {
                if (res.code == 200) {
                  isOnly = res.data;
                }
              }, 'GET', false);
              if (!isOnly) {
                return "托盘编码前缀必须唯一"
              }
            }
          })

          if (data) {
            $("input[name='quantity']").parent().parent().hide();
          }

          $("#sure").click(function () {
            if ($(this).prev().val() != "") {
              // 查询货位
              admin.req('warehouse/warehouse/admin/warehouseFactoryShelfSpace/findByCode', {code: $(this).prev().val()}, function (res) {
                if (res.code == 200) {
                  $("input[name='warehouseName']").val(res.data.warehouseName);
                  $("input[name='areaName']").val(res.data.warehouseAreaName);
                  $("input[name='shelfName']").val(res.data.shelfName);
                } else {
                  layer.msg('获取货位失败', {icon: 2, time: 1000});
                }
              }, 'GET');
            }
          })

          //载具类型列表
          admin.initDataSelect("enterprisecab/warehouse/admin/vehicleType/list", {limit: 9999, isDeleted: 1}, "vehicleTypeId", data ? data.vehicleTypeId : null, "载具类型", null, null);
          //载具类型事件
          form.on('select(vehicleTypeId)', function (data) {
            //计量单位
            admin.req('enterprisecab/warehouse/admin/vehicleType/list', {limit: 9999,isDeleted: 1}, function (res) {
              for (var k = 0; k < res.data.length; k++) {
                if (data.value == res.data[k].id) {
                  $("#unit").val(res.data[k].unitName);
                }
              }
            }, 'GET');
            //清空规格尺寸
            $("#vehicleStandardSizesId").empty();
            //载具规格尺寸列表
            admin.initDataSelect("enterprisecab/warehouse/admin/vehicleStandardSizes/list", {limit: 9999,vehicleTypeId: data.value}, "vehicleStandardSizesId", data ? data.vehicleStandardSizesId : null, "规格尺寸", "standardSizes", null);
          });

          upload.render({
            elem: '#trayPhotoUpload'
            , url: config.upload_url + 'upload?path=' + img_path
            , auto: true
            , acceptMime: 'image/*'
            , headers: {authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
              if (res.code == 200) {
                layer.msg("上传成功", {icon: 1});
                var imagUrl = res.data.url;
                // if(imagUrl){
                //     imagUrl=imagUrl.substring(imagUrl.indexOf('/')+1)
                // }
                $('#trayPhotoUpload_path').html('<img src="' + imagUrl + '" style="height: 35px;cursor: pointer;" onclick="previewImg(this)" />');
                $('#trayPhoto').val(imagUrl);
              } else if (res.code == 502) {
                return location.replace('admin/login.html');
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            }
          });

          if (data && data.trayPhoto) {
            $('#trayPhotoUpload_path').html('<img src="' + data.trayPhoto + '" style="height: 35px;cursor: pointer;" onclick="previewImg(this)" />');
          }

          // 表单提交事件
          form.on('submit(palletBoxListFormSubmit)', function (d) {
            layer.load(2);
            admin.req(data ? 'warehouse/warehouse/admin/warehousePalletBoxList/update' : 'warehouse/warehouse/admin/warehousePalletBoxList/add', d.field, function (res) {
              layer.closeAll('loading');
              if (res.code == 200) {
                layer.msg(res.msg, {icon: 1});
                table.reload('palletBoxListTable');
                layer.closeAll('page');
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            }, data ? 'PUT' : 'POST');
            return false;
          });
        }
      });
    }

    // 删除
    function doDelete(obj) {
      layer.confirm('确定要删除吗？', {
        offset: '65px',
        skin: 'layui-layer-admin'
      }, function (i) {
        layer.close(i);
        layer.load(2);
        admin.req('warehouse/warehouse/admin/warehousePalletBoxList/' + obj.data.id, {}, function (res) {
          layer.closeAll('loading');
          if (res.code == 200) {
            layer.msg(res.msg, {icon: 1});
            obj.del();
          } else {
            layer.msg(res.msg, {icon: 2});
          }
        }, 'DELETE');
      });
    }

    // 导出excel
    $('#palletBoxListBtnExport').click(function () {
      var checkRows = table.checkStatus('palletBoxListTable');
      if (checkRows.data.length == 0) {
        layer.msg('请选择要导出的数据', {icon: 2});
      } else {
        table.exportFile(insTb.config.id, checkRows.data, 'xls');
      }
    });

  });
</script>